<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>动态事件的进度条</title>

<style>
	.loading{
		width:100%;
		height:100%;
		position:fixed;
		top:0;left:0;
		z-index:100;
		background-color:white;
	}
	.loading .pic{
		width:50px;
		height:50px;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
	}
	.loading .pic i{
		display:block;
		float:left;
		width:6px;
		height:50px;
		margin:0px 2px;
		background: #399;
		-webkit-transform: scaleY(0.4);
		    -ms-transform: scaleY(0.4);
		        transform: scaleY(0.4);
		-webkit-animation: load 1.2s infinite;
		        animation: load 1.2s infinite;
	}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){ -webkit-animation-delay: 0.1s; animation-delay: 0.1s }
.loading .pic i:nth-child(3){ -webkit-animation-delay: 0.2s; animation-delay: 0.2s }
.loading .pic i:nth-child(4){ -webkit-animation-delay: 0.3s; animation-delay: 0.3s }
.loading .pic i:nth-child(5){ -webkit-animation-delay: 0.4s; animation-delay: 0.4s }

@-webkit-keyframes load{
	0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
	20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}

@keyframes load{
	0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
	20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
</style>
</head>
<body>
<div class="loading">
	<div class="pic">
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
	</div>
</div>

<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange = function(){
	console.log(document.readyState);  //可以检测出ninitilalized 还未载入complete 加载完成
	if(document.readyState == 'complete'){
		$(".loading").fadeOut();
	}
}
</script>
</body>
</html>